<template>
  <div class="points-page">
    <van-nav-bar title="积分明细" left-arrow @click-left="onClickLeft" fixed />
    <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <div class="page-content">
        <div class="top-bar">
          <img src="./../imgs/banner.png" alt="">
          <div class="rule-bar" @click="jumpLink('/pointsRule')">
            <icon class="icon" name="wenhao"></icon>
            <span>积分规则</span>
          </div>
          <div class="point-area">
            <div class="label">当前积分</div>
            <div class="num">{{availableScore}}</div>
          </div>
        </div>
        <div v-for="(monthItem,index) in listGroup" :key="index">
          <div class="month-select" @click="jumpLink('/pointsSelectTime',{monthStr:monthItem.monthStr})">
            <span>{{monthItem.monthStr}}</span>
            <icon class="icon" name="bt_tangle"></icon>
          </div>
          <div class="cell-list">
            <div class="cell-item" v-for="(item,idx) in monthItem.list" :key="idx">
              <div class="col-left">
                <div class="title">{{item.remark}}</div>
                <div class="time">
                  {{formatDateTime(item.createTime)}}
                </div>
              </div>
              <div class="col-right" :class="{'is-add':item.operaType}">
                {{item.operaType?'+':'-'}}{{item.score}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar, Icon, Toast, List } from "vant";
import { format } from "@/utils/util";

import { mapState, mapActions, mapGetters } from 'vuex';
Vue.use(NavBar)
  .use(List)
  .use(Icon);
export default {
  data() {
    return {
      loading: true,
      finished: false,
    };
  },
  computed:{
    ...mapState('user',{
      availableScore: state => state.userInfo.integration && state.userInfo.integration.availableScore || 0
    }),
    ...mapGetters('rewardPoints',['listGroup'])
  },
  mounted(){
    this.$store.commit("rewardPoints/SET_LIST", []);
    this.onLoad()
  },
  destroyed(){
    this.$store.commit('rewardPoints/RESET_QUERYPARAMS')
  },
  methods: {
    ...mapActions('rewardPoints',['queryList']),
    onClickLeft() {
      this.$router.go(-1);
    },
    jumpLink(path, query) {
      this.$router.push({ path, query });
    },
    formatDateTime(time) {
      return format(time, "yyyy-MM-dd hh:mm:ss");
    },
    onLoad(){
      this.queryList()
      .then((data) => {
        this.$nextTick(()=>{
          if (data.page >= data.totalpage) {
            this.finished = true
            this.loading = false
          } else {
            this.loading = false
          }
        })
      })
      .catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.points-page {
  .page-content {
    padding-top: 66px;
    .top-bar{
      position: relative;
      >img{
        width: 100%;
        display: block;
      }
      .rule-bar{
        position: absolute;
        top: 16px;
        right: 16px;
        color: #FFF;
        display: flex;
        align-items: center;
        .icon{
          width: 24px;
          height: 24px;
        }
        >span{
          padding-left: 2px;
        }
      }
      .point-area{
        position: absolute;
        top: 77px;
        left: 130px;
        .label{
          font-size: 14px;
          color: #FFFFFF;
          line-height: 14px;
        }
        .num{
          font-size: 24px;
          color: #FFFFFF;
          line-height: 24px;
          margin-top: 8px;
        }
      }
    }
    .month-select{
      background: #F6F6F6;
      height: 30px;
      line-height: 30px;
      padding: 0 27px;
      vertical-align: middle;
      span{
        font-size: 14px;
        color: #262626;
        line-height: 14px;
      }
      .icon{
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }
    }
    .cell-list{
      background: #FFF;
      .cell-item{
        margin: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 65px;
        padding: 0 12px;
        position: relative;
        &::after{
          position: absolute;
          box-sizing: border-box;
          content: ' ';
          pointer-events: none;
          top: -50%;
          right: -50%;
          bottom: -50%;
          left: -50%;
          border-bottom: 1px solid #ebedf0;
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
        }
        .col-left{
          .title{
            margin-bottom: 6px;
            font-size: 14px;
            color: #262626;
          }
          .time{
            font-size: 12px;
            color: rgba(0,0,0,0.50);
          }
        }
        .col-right{
          font-size: 18px;
          line-height: 14px;
          color: #7F7F7F;
          &.is-add{
            color: #FE472D;
          }
        }
      }
    }
    
  }
}
</style>